<template>
  <div class="cardinformationDetails">
    <div>会员信息</div>
    <el-form ref="form" :model="form" label-width="260px">
      <div style="display:flex;">
        <el-form-item label="会员姓名">
          {{form.name}}
        </el-form-item>
        <el-form-item label="会员卡号">
          {{form.cardNum}}
        </el-form-item>
        <el-form-item label="开卡时间">
          {{form.time}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="售卡部门">
          {{form.dept}}
        </el-form-item>
        <el-form-item label="售卡员">
          {{form.cardSeller}}
        </el-form-item>
        <el-form-item label="保险是否开通">
          {{form.open}}
        </el-form-item>
      </div>
    </el-form>
    <!-- 资产信息 -->
    <div>资产信息</div>
    <el-form ref="form" :model="form" label-width="260px">
      <div style="display:flex;">
        <el-form-item label="可提现零钱">
          {{form.withdraw ? form.withdraw:'0'}}
        </el-form-item>
        <el-form-item label="不可提现零钱">
          {{form.smallChange ? form.smallChange:'0'}}
        </el-form-item>
        <el-form-item label="积分">
          {{form.integral ? form.integral:0}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="plus">
          {{form.plus}}
        </el-form-item>
        <el-form-item label="礼品卷">
          {{form.voucher}}
        </el-form-item>
        <el-form-item label="随行次数">
          {{form.count}}
        </el-form-item>
      </div>
    </el-form>
    <!-- 卡信息 -->
    <div>卡信息</div>
    <el-form ref="form" :model="form" label-width="260px">
      <div style="display:flex;">
        <el-form-item label="开卡金额">
          {{form.openCard ? form.openCard: 0}}
        </el-form-item>
        <el-form-item label="扣会员保费">
          {{form.memberPremiums ? form.memberPremiums:0}}
        </el-form-item>
        <el-form-item label="折旧费">
          {{form.depreciation ? form.depreciation: 0}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="扣plus抵扣金额">
          {{form.deductPlusDeductTheFullAmount}}
        </el-form-item>
        <el-form-item label="扣礼品卷抵扣金额">
          {{form.deductGiftCertificateForFullDeduction}}
        </el-form-item>
        <el-form-item label="扣回赠送机票款">
          {{form.deductionOfTheNumberOfRewardTickets}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="促销活动费用">
          {{form.promotionalCost ? form.promotionalCost: 0}}
        </el-form-item>
        <el-form-item label="其他">
          {{form.other}}
        </el-form-item>
        <el-form-item label="扣体检费">
          {{form.deductionOfExperienceFee}}
        </el-form-item>
      </div>
      <div style="display:flex;color:red;">
        <el-form-item label="应退总金额">
          {{form.totalAmountToBeRefunded ? form.totalAmountToBeRefunded: 0}}
        </el-form-item>
        <el-form-item label="应退银行卡金额">
          {{form.theFullAmountOfTheBankCardShouldBeRefunded ? form.theFullAmountOfTheBankCardShouldBeRefunded: 0}}
        </el-form-item>
        <el-form-item label="应退预留款金额">
          {{form.refundableInFull ? form.refundableInFull:0}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="员工承担保费">
          {{form.theEmployeePaysThePremium? form.theEmployeePaysThePremium: 0}}
        </el-form-item>
        <el-form-item label="扣挂号费">
          {{form.deductionOfRegistrationFee}}
        </el-form-item>
        <el-form-item label="自营厅使用次数">
          {{form.deductionOfRegistrationFee}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="合作厅使用次数">
          {{form.numberTimesSelfOperatedHallUsed ? form.numberTimesSelfOperatedHallUsed: 0}}
        </el-form-item>
        <el-form-item label="安检使用次数">
          {{form.securityCheckTimes ? form.securityCheckTimes: 0}}
        </el-form-item>
        <el-form-item label="实体卡">
          {{form.physicalCard}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="扣滴滴代驾券费">
          {{form.deductionOfDidiDrivingVoucherFee}}
        </el-form-item>
        <el-form-item label="扣家医费">
          {{form.deductionOfMedicalExpenses}}
        </el-form-item>

      </div>

    </el-form>
    <!-- 扣除剩余资产 -->
    <div>扣除剩余资产</div>
    <el-form ref="form" :model="form" label-width="260px">
      <div style="display:flex;">
        <el-form-item label="扣除剩余plus">
          {{form.deductRemainingPlus}}
        </el-form-item>
        <el-form-item label="扣除剩余礼品券">
          {{form.deductRemainingGiftVouchers}}
        </el-form-item>
      </div>
    </el-form>
    <!-- 退款方式 -->
    <div>退款方式</div>
    <el-form ref="form" :model="form" label-width="260px">
      <div style="display:flex;">
        <el-form-item label="退款方式">
          {{form.refundMethod}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="开户行">
          {{form.bank}}
        </el-form-item>
        <el-form-item label="户名">
          {{form.username}}
        </el-form-item>
        <el-form-item label="卡号">
          {{form.cardNumber}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="开户地">
          {{form.accountOpening}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="退卡原因">
          {{form.reasonForRefund}}
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="备注">
          {{form.remark}}
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" :data="Querydata" border stripe>
      <el-table-column label="项目" prop="project" width="200px"></el-table-column>
      <el-table-column label="操作人" prop="operator" width="140px"></el-table-column>
      <el-table-column label="操作时间" prop="operationTime"></el-table-column>
      <el-table-column label="操作内容" prop="operationContent"></el-table-column>
    </el-table>
    <!-- 返回按钮 -->
    <div style="margin:10px 0 10px 20px">
      <el-button type="primary" @click="Returpage">返回</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'cardinformationDetails',
    data() {
      return {
        // 表格数据
        Querydata: [],
        form: {},
        // 卡id
        customerCardId: "",
      }
    },
    methods: {
      // 返回按钮
      Returpage() {
        this.$router.go(-1)
      },
      getcardRefundDetails() {
        this.$axios.getcardRefundDetails({
          id: this.customerCardId
        }).then((res) => {
          console.log(res)
          this.form = res.data
          this.Querydata = this.form.dailyRecordVoList
        })
      }
    },
    mounted() {
      this.customerCardId = this.$route.params.customerCardId;
      this.getcardRefundDetails()
    },
  }
</script>

<style scoped>
  .cardinformationDetails {
    margin: 20px;
  }

  .el-form-item {
    margin-bottom: 1px;
  }
</style>